<template>
	<view class="detail_all">
		<narbar title="商品详情"></narbar>

		<view class="goods_img">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item v-for="(mainItem, mainIndex) in goodsData.bannerList" :key="mainIndex">
					<image :src="mainItem" mode="widthFix" style="width: 100vw" />
				</swiper-item>
			</swiper>
		</view>

		<view class="content">
			<text class="goods_name">
				{{ goodsData.description }}
			</text>

			<!-- <view class="recommendation" @click="copy(detailInfo.recommendation)"
				@touchstart="start(detailInfo.recommendation)" @touchend="end(detailInfo.recommendation)">
				{{ detailInfo.recommendation }}
			</view> -->
		</view>

		<view style="width: 100vw; height: 10rpx; background-color: #f6f6f6"></view>
		<view class="detail-box">
			<view class="detail-info" v-html="goodsData.html">
			</view>
		</view>

		<view class="bottom_option">
			<view class="button_btns" style="margin-right: 10rpx" v-if="LeaderPhoneData.leaderPhone">
				<view v-if="!btnType">
					<button v-if="loginType" :class="['btns', bottomHalf ? 'btns_right' : 'btns_all']"
						@click="openLeader">我要买</button>
					<button v-if="!loginType" :class="['btns', bottomHalf ? 'btns_right' : 'btns_all']"
						open-type="getPhoneNumber" @getphonenumber="loginMini">登录</button>
				</view>
				<button v-else :class="['btns', bottomHalf ? 'btns_right' : 'btns_all']"
					@click="timeOut">{{start+'s'}}</button>
			</view>
			<view class="button_btns" style="margin-right: 10rpx" v-else>
				<button v-if="loginType" :class="['btns', bottomHalf ? 'btns_right' : 'btns_all']"
					@click="openShare">查看分享数据</button>
				<button v-if="!loginType" :class="['btns', bottomHalf ? 'btns_right' : 'btns_all']"
					open-type="getPhoneNumber" @getphonenumber="loginMini">登录</button>
			</view>
		</view>

		<!-- 下载图片的进度条 -->
		<!-- <u-popup :show="downProShow" @close="close" @open="open">
			<view class="r_down_pro">
				<text>{{ downTips }}...({{ cuDownNum }}/{{ totalDownNum }})</text>
				<view class="down_pro">
					<u-line-progress :percentage="downPro" height="20" activeColor="#ff5f5f"></u-line-progress>
				</view>
			</view>
		</u-popup> -->
		<u-popup :show="lenaderShow" :round="10" mode="center" :safeAreaInsetBottom="false" @close="closeLeader"
			@open="openLeader">
			<view class="dialog-box">
				<image class="dialog_img" src="../../static/quan.png" mode=""></image>
				<view class="quan_box">
					<view class="dialog_title">10元优惠券已领</view>
					<view class="dialog_content">
						<view>立即联系团长/店长品牌推广价抢购：</view>
						<view @click="openPhone">服务站：{{LeaderPhoneData.leaderPhone}}</view>
						<view @click="openPhone" style="text-align: center;">立刻拨打抢购</view>
					</view>
				</view>
			</view>
		</u-popup>
		<button open-type="share" class="share" v-if="loginType">
			<image src="../../static/icon_share.png"></image>
		</button>
	</view>
</template>

<script setup lang="ts">
	import { nextTick, reactive, ref } from "vue";
	import { onLoad, onShow, onShareAppMessage } from "@dcloudio/uni-app";
	import { getGoodsInfo, getGoodsTag, getProduct, doWxAuth, getPhone, setUser } from "@/utils/api";
	import { skuDailog } from "./skuDailog.vue";
	import narbar from "@/components/narbar.vue";
	import ServiceLabel from "@/components/ServiceLabel.vue";

	const detailInfo = reactive({
		id: 14,
		name: "美国潮牌&联名双肩包女2023新款大容量书包初中大学生旅行背包男",
		mainImage: ["https://jr-saas.obs.cn-east-3.myhuaweicloud.com/goods-test/7faf47cfdecc42aa92d71ba69e510936.avif"],
		infoImage: ["https://jr-saas.obs.cn-east-3.myhuaweicloud.com/goods-test/d45934b9c02542788df8a1e7fc9ee900.avif"],
		serviceIdList: ["8"],
		sales: 0,
		presentPrice: "0.01",
		originalPrice: "189.00",
		recommendation: "美国潮牌联名双肩包女2023新款大容量书包初中大学生旅行背包男\n",
		skuList: [
			{
				id: 50,
				name: "黑色",
				stock: 999,
				image: "https://jr-saas.obs.cn-east-3.myhuaweicloud.com/img-test/19b9e7a0813d4fadb5eb350adfba5461.avif",
				presentPrice: "0.01",
				originalPrice: "189.00",
			},
			{
				id: 49,
				name: "黄色",
				stock: 999,
				image: "https://jr-saas.obs.cn-east-3.myhuaweicloud.com/img-test/436941f63721458099de13165ac70bfb.avif",
				presentPrice: "8.70",
				originalPrice: "1.00",
			},
		],
		freightId: 22,
		freightName: "包邮",
		baseFreight: "0.00",
		additionalFreight: "0.00",
		specialArea: "",
	});
	const skuVisble = ref(false);
	const bottomHalf = ref(false);
	// 下载图片的进度条
	const downProShow = ref(false);
	// 下载进度
	const downPro = ref(0);
	// 已下载的数量
	const cuDownNum = ref(0);
	// 总共需要下载的数量
	const totalDownNum = ref(0);
	// 下载提示语
	const downTips = ref("正在下载...");
	const goodsData = ref({});
	const loginData = reactive({
		codeWx: "",
		encryptedData: "",
		iv: "",
	});
	const loginType = ref(false);
	const LeaderPhoneData = ref({
		leaderPhone: '123'
	});
	const lenaderShow = ref(false);
	const miniLeaderPhone = ref()
	const uniCode = ref('')
	onLoad((option) => {
		if (uni.getStorageSync("access_token")) {
			loginType.value = true;
			getLeaderPhone();
		} else {
			timeCount();
			uni.hideShareMenu();
			loginType.value = false;
		}
		// login()
		uni.login({
			provider: "weixin",
			success: (res) => {
				if (res.code) {
					//微信登录成功 已拿到code
					uniCode.value = res.code;
					getData();
				} else {
					console.log("登录失败！" + res.errMsg);
				}
			},
		});
		if (option.leaderPhone) {
			miniLeaderPhone.value = option.leaderPhone;
			uni.setStorageSync("leaderPhone", option.leaderPhone);
		} else {
			uni.removeStorageSync("leaderPhone");
		}
	});
	const start = ref(30);
	const btnType = ref(false);
	let intervalId;
	let timeCount = () => {
		btnType.value = true;
		intervalId = setInterval(() => {
			start.value -= 1;
			if (start.value <= 0) {
				clearInterval(intervalId);
				start.value = 30;
				btnType.value = false;
			}
		}, 1000);
	}
	onShow(() => {
	});
	function timeOut() {
		uni.showToast({
			title: '请浏览' + start.value + 's后进行操作',
			icon: 'none'
		})
	}
	const Loop = ref();

	// 打开sku选择
	function loginMini(phoneObj) {
		login(phoneObj.detail);
	}

	// 保存图片
	async function savePhoto(finishUrls) {
		downTips.value = "正在保存";
		cuDownNum.value = 0;

		for (const item of finishUrls) {
			let res = await uni.saveImageToPhotosAlbum({ filePath: item });
			cuDownNum.value++;

			downPro.value = (cuDownNum.value / (totalDownNum.value * 2)) * 100 + 50;
			downPro.value = downPro.value.toFixed(0);
		}
	}
	function getData() {
		const leaderPhone = uni.getStorageSync("leaderPhone");
		const params = {
			leaderPhone: leaderPhone ? leaderPhone : null,
			code: uniCode.value
		}
		getProduct(params).then((res : any) => {
			if (res.code == 200) {
				goodsData.value = res.data;
			}
		});
	}
	function login(phoneObj) {
		uni.login({
			provider: "weixin",
			success: (res) => {
				if (res.code) {
					//微信登录成功 已拿到code
					loginData.codeWx = res.code;
					uni.getUserInfo({
						provider: "weixin",
						success: function (infoRes) {
							loginData.encryptedData = phoneObj.encryptedData;
							loginData.iv = phoneObj.iv;
							doWxAuthFn();
						},
					});
				} else {
					console.log("登录失败！" + res.errMsg);
				}
			},
		});
	}
	function doWxAuthFn() {
		const leaderPhone = uni.getStorageSync("leaderPhone");
		const params = {
			leaderPhone: leaderPhone ? leaderPhone : null,
			jsCode: loginData.codeWx,
			encryptedData: loginData.encryptedData,
			siv: loginData.iv,
		};
		doWxAuth(params).then((res) => {
			if (res.token) {
				uni.setStorageSync("access_token", res.token);
				uni.setStorageSync("userId", res.userId);
				uni.setStorageSync("unionId", res.unionId);
				uni.showToast({
					title: "登录成功！",
					icon: "success",
					duration: 2000,
				});
				if (!miniLeaderPhone.value) {
					uni.setStorageSync("leaderPhone", res.phone);
				}
				getLeaderPhone();
				uni.showShareMenu();
				loginType.value = true;
			}
		});
	}
	function setLeaderPhone() {
		const params = {
			leaderMobile: miniLeaderPhone.value
		}
		setUser(params).then((res : any) => {
			if (res.code == 200) {
				getLeaderPhone();
			}
		})
	}
	function getLeaderPhone() {
		getPhone({}).then((res : any) => {
			if (res.code == 200) {
				LeaderPhoneData.value = res.data;
				if (res.data.leaderPhone) {
					uni.setStorageSync("leaderPhone", res.data.leaderPhone);
				}
			}
		})
	}
	function openLeader() {
		lenaderShow.value = true;
	}
	function closeLeader() {
		lenaderShow.value = false;
	}
	function openShare() {
		uni.navigateTo({
			url: '/pages/goodsDetail/share'
		})
	}
	function openPhone(){
		uni.makePhoneCall({
			phoneNumber: LeaderPhoneData.value.leaderPhone
		});
	}
	onShareAppMessage((res) => {
		return {
			title: goodsData.value.description,
			path: "/pages/goodsDetail/index?leaderPhone=" + uni.getStorageSync("leaderPhone"),
		};
	});
</script>

<style lang="scss" scoped>
	.detail_all {
		width: 100vw;
		display: flex;
		flex-direction: column;
		background-color: #fefefe;
		padding-bottom: 200rpx;
	}

	.content {
		padding: 50rpx 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 5rpx 5rpx rgba($color: #444444, $alpha: 0.05);
		margin: 15rpx;
		background-color: white;
	}

	.goods_option {
		display: flex;
		flex-direction: column;
	}

	.option_item {
		color: #4e4e4e;
		font-size: 22rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;

		margin: 0 60rpx;
	}

	.option_left {}

	.option_title {
		font-weight: 600;
	}

	.option_content {
		font-weight: 300;
		margin-left: 30rpx;
	}

	.swiper {
		height: 100vw;
	}

	.goods_name {
		font-size: 32rpx;
		font-weight: 600;
	}

	.price_sales {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 10rpx;
	}

	.price {
		font-size: 48rpx;
		color: #d23000;
		font-weight: 600;
	}

	.original_price {
		color: #b5b5b5;
		font-weight: 400;
		font-size: 28rpx;
		margin-left: 4px;
		text-decoration: line-through;
		margin-bottom: 5rpx;
	}

	.sales {
		color: #b5b5b5;
		font-weight: 400;
		font-size: 28rpx;
	}

	.detail_images {
		display: flex;
		flex-direction: column;
		width: 100vw;
	}

	.bottom_option {
		width: 100vw;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.3);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.button_btns {
		display: flex;
	}

	.btns {
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100rpx;
		background-color: red;
		line-height: 70rpx;
	}

	.btns_all {
		height: 70rpx;
		width: calc(100vw - 30px);
		font-size: 24rpx;
		font-weight: 600;
		margin: 0 30rpx;
	}

	.btns_right {
		width: 250rpx;
		height: 70rpx;
		font-size: 24rpx;
		font-weight: 600;
		margin-right: 1vmin;
	}

	.bottom_icons {
		font-size: 22rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.service_label {
		width: 100%;
		flex-wrap: wrap;
	}

	.recommendation {
		font-size: 22rpx;
		color: #8b8b8b;
		// margin: 30rpx;
		margin-top: 10rpx;
		line-height: 40rpx;
	}

	.goods_img {
		position: relative;
	}

	.download {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		display: flex;
		width: 150rpx;
		background-color: rgba($color: #000000, $alpha: 0.5);
		border-radius: 10rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;

		text {
			font-size: 22rpx;
			color: #fff;
		}
	}

	.r_down_pro {
		width: 100vw;
		height: 150rpx;
		background-color: #fff;
		padding: 50rpx 30rpx;

		text {
			font-size: 33rpx;
			font-weight: 600;
		}
	}

	.down_pro {
		margin-top: 20rpx;
		width: 90%;
	}

	.video-box {
		box-sizing: border-box;
		width: 100%;
		padding: 0 20rpx;

		video {
			border-radius: 10px;
		}
	}

	.detail-box {
		box-sizing: border-box;
		width: 100%;
		padding: 0 20rpx;

		.detail-info {
			word-break: break-all;

		}
	}

	.dialog-box {
		position: relative;

		.dialog_img {
			position: absolute;
			bottom: 0rpx;
			right: 0rpx;
			width: 210rpx;
			height: 210rpx;
			z-index: 1;
			transform: rotate(55deg);
		}

		.dialog_title {
			font-weight: bold;
			color: white;
			background: #ff4444;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 20rpx;
		}

		.dialog_content {
			padding: 30rpx;
			view{
				line-height: 50rpx;
			}
		}

		.quan_box {
			z-index: 2;
		}
	}

	.share {
		width: 80rpx;
		height: 80rpx;
		background-color: white;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.3);
		position: fixed;
		bottom: 14vh;
		right: 20rpx;
		border-radius: 50%;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;

		image {
			width: 50%;
			height: 50%;
			position: absolute;
			z-index: 1;
		}

		button {
			border: none;
			position: absolute;
			z-index: 2;
		}
	}
</style>